<template>
  <transition name="fade">
    <div class="clear">
      <div class="section">
        <div class="loading">
          <img class="icon-animation" src="@/assets/icon/cat.png" alt=""/>
          <p class="desc">猫猫正在拼命加载中...</p>
        </div>
      </div>
    </div>
  </transition>
</template>
<style scoped lang="scss">
@-ms-keyframes iconRotate {
  0% {
    -ms-transform: rotate(0deg);
  }

  25% {
    -ms-transform: rotate(90deg);
  }

  50% {
    -ms-transform: rotate(180deg);
  }

  75% {
    -ms-transform: rotate(270deg);
  }

  100% {
    -ms-transform: rotate(360deg);
  }
}

@keyframes iconRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
  opacity: 0;
}

.clear {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(182, 178, 178, 0.9);
  z-index: 10000;
  display: flex;
  justify-content: center;
  justify-items: center;

  .section {
    width: 200px;
    height: 100px;
    background: transparent;
    margin: auto 0;
    z-index: 99;

    .loading {
      display: flex;
      width: 100%;
      text-align: center;
      flex-direction: column;
    }

    .icon-animation {
      width: 180px;
      height: 70px;
      animation: iconRotate 1s linear infinite;
    }

    .desc {
      margin-top: 10px;
      font-size: 15px;
      color: rgb(255, 255, 255);
    }
  }
}
</style>

<script setup lang="ts">
</script>